<template>
  <div class='home'>
    <div class='head' :style="{backgroundImage: 'url('+imgurl+')'}">
      <div>
        <div class="head_l">
          <div class='ico'>
            <img src="../../static/images/icon/inf.png" alt="">
          </div>
          <div class='txt'>
            <span>视频监控系统</span>
          </div>
        </div>
        <div class="head_c">
          <!-- <a style="text-decoration: underline"
            href="http://nxluoshan.baohuqu.net:1087/api/res/VideoWebPlugin.exe">点击下载监控插件</a> -->
        </div>
        <div class='head_r'>
          <div>
            <img src="../../static/images/icon/tx.png" alt="">
          </div>
          <div>
            <span style='font-size: 0.16rem;'>管理员</span>
          </div>
        </div>
      </div>
    </div>
    <!--    主体部分 B-->
    <div class='container'>
      <!--      左侧子路由导航 B-->
      <div :class='small'>
        <div class="fltitle">
          <span>森林防火</span>
        </div>
        <div class='l_navs'>
          <!-- <router-link style="background-color: #fff;" :to='{name:"FireProtection"}'>
            <div>
              <span class='icon iconfont icon-fanghuo1'></span>
            </div>
            <div>
              <span>基础设施</span>
            </div>
          </router-link> -->
          <router-link style="background-color: #fff;" :to='{name:"realTime"}'>
            <div>
              <span class='icon iconfont icon-shexiangtou'></span>
            </div>
            <div>
              <span>防火监控</span>
            </div>
          </router-link>
          <router-link style="background-color: #fff;" :to='{name:"mapMonitorings"}'>
            <div>
              <span class='icon iconfont icon-jiankong'></span>
            </div>
            <div>
              <span>设备管理</span>
            </div>
          </router-link>
        </div>
        <div class="fltitle">
          <span>车辆卡口</span>
        </div>

        <div class='l_nav'>
          <!-- <router-link style="background-color: #fff;" :to='{name:"mapMonitoring"}'>
            <div>
              <span class='icon iconfont icon-jiankong'></span>
            </div>
            <div>
              <span>地图监控</span>
            </div>
          </router-link> -->

           <router-link style="background-color: #fff;" :to='{name:"history"}'>
            <div>
              <span class='icon iconfont icon-lishijilu'></span>
            </div>
            <div>
              <span>历史记录</span>
            </div>
          </router-link>
<!-- 
          <router-link style="background-color: #fff;" :to='{name:"equipment"}'>
            <div>
              <span class='icon iconfont icon-shebei'></span>
            </div>
            <div>
              <span>设备管理</span>
            </div>
          </router-link>  -->

          <!--下拉项-->
          <!-- <div v-for="(rl,i) in routerList">
            <div class='pull_down' @click="opensubitem(rl,i)">
              <span :style="rl.on_off?'color:#00CC46':'color: #898a8b;'" :class='rl.font_name'></span>
              <span style='margin-right: .1rem;'>{{rl.name}}</span>
              <span style='font-size: .16rem' :class='rl.on_off?rl.up:rl.down'></span>
            </div>

            <router-link v-show="rl.on_off" v-for="(c,index) in rl.children" :key="index" :to='{name:c.path}'>
              <div>
                <span style='font-size: .16rem' :class='c.font_name'></span>
              </div>
              <div>
                <span>{{c.name}}</span>
              </div>
            </router-link> -->

          <!-- </div> -->

          <!--         闭合开关 B-->
          <div class='shiftknob' @click='controlzb' :style='zb?"left: .55rem;":"left:-10px"'>
            <img style='width: 100%;height: 100%;'
              :src="zb?'../../static/images/nav/z.png':'../../static/images/nav/b.png'" alt="">
          </div>
          <!--         闭合开关 E-->
        </div>
      </div>
      <!--      左侧子路由导航 E-->
      <!--      路由容器 B-->
      <div :class='big'>
        <router-view />
      </div>
      <!--      路由容器 E-->
    </div>
    <!--    主体部分 E-->

  </div>
</template>
<script>
export default {
  data() {
    return {
      imgurl: "",
      xl: false,
      zb: true,
      big: {
        route_b: true,
        route_z: false,
        show_in: false,
        show_out: false
      },
      small: {
        sidebar: true,
        sidebar_s: false,
        sidebar_in: false,
        sidebar_out: false,
      },
      routerList: [
        {
          name: "统计分析",
          font_name: "icon iconfont icon-tongjifenxi",
          up: "icon iconfont icon-shangla",
          down: "icon iconfont icon-xiala",
          on_off: false,
          children: [
            {
              name: "车辆统计",
              font_name: "icon iconfont icon-che",
              path: "car"
            },
            {
              name: "人员统计",
              font_name: "icon iconfont icon-renyuan",
              path: "personnel"
            }
          ]
        },
        {
          name: "黑白名单",
          font_name: "icon iconfont icon-artboard2",
          up: "icon iconfont icon-shangla",
          down: "icon iconfont icon-xiala",
          on_off: false,
          children: [
            {
              name: "车辆名单",
              font_name: "icon iconfont icon-che",
              path: "car_manage"
            },
            {
              name: "人员名单",
              font_name: "icon iconfont icon-renyuan",
              path: "personnel_manage"
            },
          ]
        },
      ]
    }
  },
  created() {
    this.imgurl = window.sessionStorage.getItem('imgUrl')
    if (sessionStorage.getItem('x_status') != null) {
      let num = parseFloat(sessionStorage.getItem('x_status'))
      this.routerList.forEach((e, i) => {
        if (num == i) {
          e.on_off = true;
        }
      })
    } else {
      this.routerList.forEach((e, i) => {
        e.on_off = false;
      })
    }

    if (sessionStorage.getItem('z_status') != null) {
      if (sessionStorage.getItem('z_status') == 'true') {
        this.zb = true;
        this.big.route_b = true
        this.small.sidebar = true
      } else {
        this.zb = false;
        this.big.route_b = false
        this.big.route_z = true
        this.small.sidebar = false
        this.small.sidebar_s = true
      }
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == '/mapMonitoring' || to.path == '/history') {
        this.routerList.forEach((e, i) => {
          e.on_off = false;
        })
        window.sessionStorage.removeItem('x_status');
      }
    }
  },
  //     mounted() {
  //       //        水波纹动画
  //       var svg_height = 30,
  //         svg_width = 1920,
  //         wave_data = [[], []],
  //         area = d3.area().y0(svg_height).curve(d3.curveBasis),   //curve会进行平滑处理
  //         svg_paths = [];
  //       var max = 800;  //控制速度
  //       for (var i = 0; i < max; i++) {
  //         var r = i / max * 2;
  //         wave_data[0].push(r + 1);           //波浪一
  //         wave_data[1].push(r + 0.4);   //波浪二（+1代表偏移π）
  //       }
  //       var d = svg_width / (wave_data[1].length - 1);
  //       svg_paths.push(d3.select('#svg-area path:first-child'));
  //       svg_paths.push(d3.select('#svg-area path:last-child'))
  //
  //       function area_generator(data) {
  //         var wave_height = 0.8;     //波浪高度
  //         var area_data = data.map(function (y, i) {
  //           return [i * d, svg_height * (1 - (wave_height * Math.sin(y * Math.PI * 4) + 2) / 3)]; //+2将范围[-1,1]转成[1,3]
  //         });
  // //        return function() {
  //         return area(area_data);
  // //        };
  //       }
  //
  //       function renderWave() {
  //         svg_paths.forEach(function (svg_path, i) {
  //           svg_path.attr('d', area_generator(wave_data[i]));
  //           wave_data[i] = getNextData(wave_data[i]);
  //         });
  //         requestAnimationFrame(renderWave);
  //       }
  //
  //       function getNextData(data) {
  //         var r = data.slice(1);
  //         r.push(data[0]);
  //         return r;
  //       }
  //
  //       requestAnimationFrame(renderWave);
  // //        水波纹动画
  //     },
  methods: {
    //下拉项4
    opensubitem(t, i) {
      t.on_off = !t.on_off;
      //        this.$router.push(t.children[0].path);
      this.routerList.forEach((e, n) => {
        if (n != i) {
          e.on_off = false;
        }
      })
      sessionStorage.setItem('x_status', i);
    },
    //控制闭合
    controlzb() {
      this.zb = !this.zb;
      sessionStorage.setItem('z_status', this.zb);
      this.animation();
    },
    //缓动动画
    animation() {
      if (this.zb) {
        this.big.route_z = false
        this.big.route_b = false
        this.big.show_in = true
        this.big.show_out = false

        this.small.sidebar = false
        this.small.sidebar_s = false
        this.small.sidebar_in = true
        this.small.sidebar_out = false

      } else {
        this.big.route_z = false
        this.big.route_b = false
        this.big.show_in = false
        this.big.show_out = true

        this.small.sidebar = false
        this.small.sidebar_s = false
        this.small.sidebar_in = false
        this.small.sidebar_out = true
      }
    }
  }
}
</script>
<style scoped>
@import "../../static/css/home.css";
</style>
